<template>
  <div class="layout">
    <mt-header fixed title="on my own!" class="header">
        <mt-button icon="back" slot="left" v-show="flag"></mt-button>
    </mt-header>


    <transition name="c">
      <router-view class="content"></router-view>
    </transition>
  
    <mt-tabbar v-model="selected" fixed class="footer">
        <mt-tab-item id="首页" href="#/">
          <span class="glyphicon glyphicon-home" slot="icon"></span>
          首页
        </mt-tab-item>
        <mt-tab-item id="搜索" href="#/search">
          <span class="glyphicon glyphicon-search" slot="icon"></span>
          搜索
        </mt-tab-item>
        <mt-tab-item id="购物车" href="#/shopcart">
          
          <span class="glyphicon glyphicon-shopping-cart" slot="icon">
            <span class="badge">0</span>
          </span>
          购物车
        </mt-tab-item>
        <mt-tab-item id="会员" href="#/user">
          <span class="glyphicon glyphicon-user" slot="icon"></span>
          会员
        </mt-tab-item>
    </mt-tabbar>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected:'首页',
        flag:false
      }
    },
    watch: {
        '$route.path': function (newVal, oldVal) {
          if (this.$route.path !== '/home') {
            this.flag=true
          } else {
            this.flag=false
          }
          if (this.$route.path=='/home') {
            this.selected = '首页'
          } else if (this.$route.path == '/user') {
            this.selected = '会员'
          } else if (this.$route.path == '/shopcart') {
            this.selected = '购物车'
          }else if ( this.$route.path == '/search') {
            this.selected ='搜索'
          }
        }
      }
  }
</script>


<style>
  .layout,
  body {
    width: 100vw;
    overflow-x: hidden;
  }
  .c-enter {
    opacity: 0;
    transform: translateX(100%);
  }
  .c-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }
  .c-enter-active,
  .c-leave-active {
    transition: all .5s ease;
  }
  .header {
    height: 50px;
    width: 100vw;
    overflow: hidden;
  }
 .mint-header-title {
   margin: 0;
   height: 50px;
   line-height: 70px;
   font-size: 40px;
   font-family: "Againts";
 }
 .mint-tab-item-icon {
   margin-bottom: 0;
 }
 .content {
   height: 100vh;
   padding: 50px 0 0 0;
   overflow: hidden;
 }
 .badge {
   position: absolute;
   top: -10px;
   right: -10px;
   background-color:red;
 }
 .footer {
   width: 100vw;
   font-size: 20px;
   background-color: #26a2ff;
   box-shadow: inset 0px 3px 9px 0px #fff;
 }
 .mint-tab-item-label {
   padding-top: 5px;
   color: #fff;
 }
 .footer .glyphicon {
   color: #fff;
 }
 .mint-tabbar > .mint-tab-item.is-selected {
   background-color: #fff;
 }
 .mint-tabbar > .mint-tab-item.is-selected .mint-tab-item-label {
   color:#26a2ff;
 }
 a:hover {
   text-decoration: none;
 }
 .mint-tabbar > .mint-tab-item.is-selected .glyphicon {
   color:#26a2ff;
 }

</style>
